'use client';

import * as React from 'react';
import { cn } from '@/lib/utils';
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from './table';

// 响应式表格组件
function ResponsiveTable({ className, children, ...props }) {
  return (
    <div className="relative w-full overflow-auto">
      <Table className={cn('min-w-full', className)} {...props}>
        {children}
      </Table>
    </div>
  );
}

// 响应式表格头部
function ResponsiveTableHeader({ className, children, ...props }) {
  return (
    <TableHeader className={cn('', className)} {...props}>
      {children}
    </TableHeader>
  );
}

// 响应式表格行
function ResponsiveTableRow({ className, children, ...props }) {
  return (
    <TableRow className={cn('', className)} {...props}>
      {children}
    </TableRow>
  );
}

// 响应式表格头部单元格
function ResponsiveTableHead({ 
  className, 
  children, 
  width = 'auto',
  minWidth = 'auto',
  hideOnMobile = false,
  hideOnTablet = false,
  ...props 
}) {
  const responsiveClasses = [
    hideOnMobile && 'hidden sm:table-cell',
    hideOnTablet && 'hidden md:table-cell',
    !hideOnMobile && !hideOnTablet && 'table-cell'
  ].filter(Boolean);

  return (
    <TableHead 
      className={cn(
        'whitespace-nowrap',
        width !== 'auto' && `w-${width}`,
        minWidth !== 'auto' && `min-w-${minWidth}`,
        responsiveClasses,
        className
      )} 
      {...props}
    >
      {children}
    </TableHead>
  );
}

// 响应式表格单元格
function ResponsiveTableCell({ 
  className, 
  children, 
  hideOnMobile = false,
  hideOnTablet = false,
  truncate = false,
  title,
  ...props 
}) {
  const responsiveClasses = [
    hideOnMobile && 'hidden sm:table-cell',
    hideOnTablet && 'hidden md:table-cell',
    !hideOnMobile && !hideOnTablet && 'table-cell'
  ].filter(Boolean);

  const content = truncate ? (
    <span className="truncate block" title={title || children}>
      {children}
    </span>
  ) : children;

  return (
    <TableCell 
      className={cn(
        'align-middle',
        responsiveClasses,
        className
      )} 
      {...props}
    >
      {content}
    </TableCell>
  );
}

// 表格加载状态
function TableLoading({ colSpan = 1, message = "加载中..." }) {
  return (
    <ResponsiveTableRow>
      <ResponsiveTableCell
        colSpan={colSpan}
        className="py-16 sm:py-24"
      >
        <div className="flex flex-col items-center justify-center gap-4 text-sm text-muted-foreground">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-t-2 border-primary"></div>
          <span>{message}</span>
        </div>
      </ResponsiveTableCell>
    </ResponsiveTableRow>
  );
}

// 表格空状态
function TableEmpty({ colSpan = 1, message = "暂无数据" }) {
  return (
    <ResponsiveTableRow>
      <ResponsiveTableCell colSpan={colSpan} className="text-center py-8 text-muted-foreground">
        {message}
      </ResponsiveTableCell>
    </ResponsiveTableRow>
  );
}

export {
  ResponsiveTable,
  ResponsiveTableHeader,
  ResponsiveTableRow,
  ResponsiveTableHead,
  ResponsiveTableCell,
  TableLoading,
  TableEmpty
}; 